<template>
  <view class="pay-password-page">
    <view class="header">
      <text class="back" @click="goBack">＜</text>
      <text class="title">输入支付密码</text>
    </view>
    <view class="merchant-info">
      <text>沃尔玛超市（平安路店）</text>
      <text class="amount">￥123.00</text>
    </view>
    <view class="password-inputs" @click="focusInput">
      <view v-for="i in 6" :key="i" class="dot">{{ password[i-1] ? '●' : '' }}</view>
      <input
        ref="inputRef"
        class="real-input"
        type="number"
        maxlength="6"
        v-model="password"
        @input="onInput"
        @blur="onBlur"
      />
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'
const password = ref('')
const inputRef = ref(null)
function onInput(e) {
  if (password.value.length === 6) {
    uni.redirectTo({ url: '/pages/C/home/pay-success' })
  }
}
function focusInput() {
  inputRef.value && inputRef.value.focus()
}
function onBlur() {
  // 可选：失焦时处理
}
function goBack() {
  uni.navigateBack()
}
</script>
<style src="./pay-password.css" scoped></style> 